<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品列表</title>
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="../css/normalize.css">
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="../css/common.css">
    <!-- 引入插件样式 -->
    <link rel="stylesheet" href="../js/lunbo/css/slider.css">
    <!-- 引入当前样式 -->
    <link rel="stylesheet" href="../css/productlist.css">
</head>

<body>
    <!-- 网页头部 -->
    <div id="header" class="header">
        <div class="container clearfix">
            <section class="fl">
                <p>乐购www.legou.com</p>
            </section>
            <section class="fr">
                <p>欢迎光临乐购 &emsp;
                    请 <span><a href="#">登录</a></span><span>|</span><span><a href="#">注册</a></span></p>
            </section>
        </div>
    </div>
    <div class="header-bottom container clearfix">
        <div class="header-bottom-logo fl">
            <img class="header-bottom-logoimg" src="../imgs/图标/logo.webp" alt="">
        </div>
        <div class="header-bottom-right fr">
            <div class="header-bottom-right-search clearfix">
                <p><input type="text" placeholder="请输入搜索的商品名"><button><img src="../imgs/图标/搜索.png" alt=""></button></p>
                <p>
                    <span class="header-bottom-right-search-1">
                        <img src="../imgs/图标/购物车.png" alt="">
                    </span>
                    <span>购物车</span>
                    <span class="header-bottom-right-search-2">0</span>
                </p>
                <p>我的订单</p>

            </div>
            <div class="header-bottom-right-nav">
                <a class="header-nav" href="#">图片</a>
                <a class="header-nav" href="#">电子书</a>
                <a class="header-nav" href="#">原创文学</a>
                <a class="header-nav" href="#">服装</a>
                <a class="header-nav" href="#">运动户外</a>
                <a class="header-nav" href="#">孕婴童</a>
                <a class="header-nav" href="#">家居</a>
                <a class="header-nav" href="#">创意文具</a>
                <a class="header-nav" href="#">地方特产</a>
                <a class="header-nav" href="#">海外购</a>
                <a class="header-nav" href="#">电器城</a>

            </div>
        </div>
    </div>
    <!-- banner横幅 -->
    <div class="banner">
        <div class="banner-img container pr">
            <div class="banner-con pa">
                <h2 class="txt-title">潮流新区</h2>
                <ul>
                    <li class="txt-li">
                        <h3 class="txt-h">大家都在穿</h3>
                        <p class="txt-p">
                            <a class="txt-a" href="#">当季新品</a>
                            <a class="txt-a" href="#">商场同款</a>
                            <a class="txt-a" href="#">天猫独家</a>
                        </p>
                        <p class="txt-p">
                            <a class="txt-a" href="#">连衣裙</a>
                            <a class="txt-a" href="#">卫衣</a>
                            <a class="txt-a" href="#">短外套</a>
                            <a class="txt-a" href="#">衬衫</a>
                        </p>
                        <p class="txt-p">
                            <a class="txt-a" href="#">气质套装</a>
                            <a class="txt-a" href="#">卫衣</a>
                            <a class="txt-a" href="#">毛衣</a>
                            <a class="txt-a" href="#">羽绒服</a>
                        </p>
                    </li>
                    <li class="txt-li">
                        <h3 class="txt-h">品质上装</h3>
                        <p class="txt-p">
                            <a class="txt-a" href="#">当季新品</a>
                            <a class="txt-a" href="#">商场同款</a>
                            <a class="txt-a" href="#">天猫独家</a>
                        </p>
                        <p class="txt-p">
                            <a class="txt-a" href="#">连衣裙</a>
                            <a class="txt-a" href="#">卫衣</a>
                            <a class="txt-a" href="#">短外套</a>
                            <a class="txt-a" href="#">衬衫</a>
                        </p>

                    </li>
                    <li class="txt-li">
                        <h3 class="txt-h">特色服饰</h3>
                        <p class="txt-p">
                            <a class="txt-a" href="#">时尚套装</a>
                            <a class="txt-a" href="#">休闲套装</a>
                            <a class="txt-a" href="#">妈妈装</a>
                        </p>
                        <p class="txt-p">
                            <a class="txt-a" href="#">大码女装</a>
                            <a class="txt-a" href="#">卫衣</a>
                            <a class="txt-a" href="#">套装裙</a>
                            <a class="txt-a" href="#">皮草</a>
                        </p>
                        <p class="txt-p">
                            <a class="txt-a" href="#">雪纺长裙</a>
                            <a class="txt-a" href="#">短裤</a>
                            <a class="txt-a" href="#">哈伦裤</a>
                            <a class="txt-a" href="#">风衣</a>
                        </p>
                    </li>

                </ul>
            </div>
        </div>
    </div>
    <!-- 产品推荐-->
    <div class="recommend container">
        <ul class="recommend-top clearfix">
            <li class="top-li fl">
                <p class="top-p clearfix">
                    <span class="top-span fl">品牌闪购</span>
                    <span class="top-btn fr">
                        <a href="#">
                            <img src="../imgs/img/箭头 1.png" alt="">
                        </a>
                    </span>
                </p>
                <div class="top-con pr">
                    <a href="#">
                        <img src="../imgs/img/初秋.png" alt="">
                    </a>
                    <div class="con-box pa">
                        <p class="con-logo fl">
                            <span>
                                <img src="../imgs/img/little.png" alt="">
                            </span>
                        </p>
                        <p class="con-txt fr">
                            <span class="con-span">初秋时尚</span>
                            <span class="con-span">全场三折起</span>
                        </p>
                    </div>
                </div>
            </li>
            <li class="top-li fl">
                <p class="top-p clearfix">
                    <span class="top-span fl">聚名品</span>
                    <span class="top-txt">LUXURY CHANNEL</span>
                    <span class="top-btn fr">
                        <a href="#">
                            <img src="../imgs/img/箭头 1.png" alt="">
                        </a>
                    </span>
                </p>
                <div class="top-con pr">
                    <a class="con-a" href="#">
                        <img src="../imgs/img/聚名品.png" alt="">
                    </a>
                    <div class="con-box pa">
                        <p class="con-logo fl">
                            <span>
                                <img src="../imgs/img/little.png" alt="">
                            </span>
                        </p>
                        <p class="con-txt fr">
                            <span class="con-span">特会上新</span>
                            <span class="con-span">大牌限时折扣</span>
                        </p>
                    </div>
                </div>
            </li>
            <li class="top-li fl">
                <p class="top-p clearfix">
                    <span class="top-span fl">品牌活动</span>
                    <span class="top-txt">BRAND ACTIVITY</span>
                    <span class="top-btn fr">
                        <a href="#">
                            <img src="../imgs/img/箭头 1.png" alt="">
                        </a>
                    </span>
                </p>
                <div class="top-con pr">
                    <a href="#">
                        <img src="../imgs/img/特惠上xin_02.jpg" alt="">
                    </a>
                    <div class="con-box pa">
                        <p class="con-logo fl">
                            <span>
                                <img src="../imgs/img/little.png" alt="">
                            </span>
                        </p>
                        <p class="con-txt fr">
                            <span class="con-span">特会上新</span>
                            <span class="con-span">大牌限时折扣</span>
                        </p>
                    </div>
                </div>
            </li>
        </ul>
        <ul class="recommend-btm clearfix">
            <li class="btm-li">
                <a href="#">
                    <img src="../imgs/img/brand-two1.png" alt="">
                </a>
            </li>
            <li class="btm-li">
                <a href="#">
                    <img src="../imgs/img/brand-two2.png" alt="">
                </a>
            </li>
            <li class="btm-li">
                <a href="#">
                    <img src="../imgs/img/brand-two3.png" alt="">
                </a>
            </li>
            <li class="btm-li">
                <a href="#">
                    <img src="../imgs/img/brand-two4.png" alt="">
                </a>
            </li>
        </ul>
    </div>
    <!-- 女装热销 -->
    <div class="product container">
        <!-- 产品标题 -->
        <div class="product-title pr">
            <span class="title-img"><img src="../imgs/img/title_bg_icon2-right.png" alt=""></span>
            <span class="title-ctr">女装热销</span>
            <span class="title-img"><img src="../imgs/img/title_bg_icon2-left.png" alt=""></span>
        </div>
        <!-- 产品内容 -->
        <div class="product-con clearfix">
            <!-- 左边 -->
            <div class="con-left pr fl">
                <a href="#">
                    <img src="../imgs/img/selling-left1.jpg" alt="">
                </a>
                <ul class="con-txt pa">
                    <li class="txt-li fl">口 红</li>
                    <li class="txt-li fl">女 装</li>
                    <li class="txt-li fl">女 包</li>
                    <li class="txt-li fl">卸妆洁面</li>
                </ul>
            </div>
            <!-- 中间 -->
            <ul class="con-ctr fl">
                <li class="ctr-li fl">
                    <a href="#">
                        <img src="../imgs/img/selling-center1.png" alt="">
                    </a>
                </li>
                <li class="ctr-li fl">
                    <a href="#">
                        <img src="../imgs/img/selling-center2.png" alt="">
                    </a>
                </li>
                <li class="ctr-li fl">
                    <a href="#">
                        <img src="../imgs/img/selling-center3.png" alt="">
                    </a>
                </li>
                <li class="ctr-li fl">
                    <a href="#">
                        <img src="../imgs/img/selling-center4.png" alt="">
                    </a>
                </li>

            </ul>
            <!-- 右边 -->
            <div class="con-right fl">
                <p class="right-title">
                    <span class="title-span">女装销量</span>
                    <span class="title-span">爆买热款 实时更新</span>
                </p>
                <ul>
                    <li class="right-con active">
                        <p class="right-con-p">1. 乐町牛仔外套女19秋季新款短外</p>
                        <div class="right-con-box clearfix">
                            <a href="#">
                                <p class="con-box-img fl">
                                    <span class="box-img-txt">1</span>
                                </p>
                                <p class="con-box-p">乐町牛仔外套女19秋季新款短外套女</p>
                                <p class="con-box-p"><span class="con-box-span">&yen;</span> 199.00</p>
                            </a>
                        </div>
                    </li>
                    <li class="right-con">
                        <p class="right-con-p">2. 乐町牛仔外套女19秋季新款短外</p>
                        <div class="right-con-box clearfix">
                            <a href="#">
                                <p class="con-box-img fl">
                                    <span class="box-img-txt">2</span>
                                </p>
                                <p class="con-box-p">乐町牛仔外套女19秋季新款短外套女</p>
                                <p class="con-box-p"><span class="con-box-span">&yen;</span> 199.00</p>
                            </a>
                        </div>
                    </li>
                    <li class="right-con">
                        <p class="right-con-p">3. 乐町牛仔外套女19秋季新款短外</p>
                        <div class="right-con-box clearfix">
                            <a href="#">
                                <p class="con-box-img fl">
                                    <span class="box-img-txt">3</span>
                                </p>
                                <p class="con-box-p">乐町牛仔外套女19秋季新款短外套女</p>
                                <p class="con-box-p"><span class="con-box-span">&yen;</span> 199.00</p>
                            </a>
                        </div>
                    </li>
                    <li class="right-con">
                        <p class="right-con-p">4. 乐町牛仔外套女19秋季新款短外</p>
                        <div class="right-con-box clearfix">
                            <a href="#">
                                <p class="con-box-img fl">
                                    <span class="box-img-txt">4</span>
                                </p>
                                <p class="con-box-p">乐町牛仔外套女19秋季新款短外套女</p>
                                <p class="con-box-p"><span class="con-box-span">&yen;</span> 199.00</p>
                            </a>
                        </div>
                    </li>
                    <li class="right-con">
                        <p class="right-con-p">5. 乐町牛仔外套女19秋季新款短外</p>
                        <div class="right-con-box clearfix">
                            <a href="#">
                                <p class="con-box-img fl">
                                    <span class="box-img-txt">5</span>
                                </p>
                                <p class="con-box-p">乐町牛仔外套女19秋季新款短外套女</p>
                                <p class="con-box-p"><span class="con-box-span">&yen;</span> 199.00</p>
                            </a>
                        </div>
                    </li>
                    <li class="right-con">
                        <p class="right-con-p">6. 乐町牛仔外套女19秋季新款短外</p>
                        <div class="right-con-box clearfix">
                            <a href="#">
                                <p class="con-box-img fl">
                                    <span class="box-img-txt">6</span>
                                </p>
                                <p class="con-box-p">乐町牛仔外套女19秋季新款短外套女</p>
                                <p class="con-box-p"><span class="con-box-span">&yen;</span> 199.00</p>
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 男装热销 -->
    <div class="product container">
        <!-- 产品标题 -->
        <div class="product-title pr">
            <span class="title-img"><img src="../imgs/img/title_bg_icon2-right.png" alt=""></span>
            <span class="title-ctr">男装热销</span>
            <span class="title-img"><img src="../imgs/img/title_bg_icon2-left.png" alt=""></span>
        </div>
        <!-- 产品内容 -->
        <div class="product-con clearfix">
            <!-- 左边 -->
            <div class="con-left pr fl">
                <a href="#">
                    <img src="../imgs/img/selling-left1.jpg" alt="">
                </a>
                <ul class="con-txt pa">
                    <li class="txt-li fl">口 红</li>
                    <li class="txt-li fl">女 装</li>
                    <li class="txt-li fl">女 包</li>
                    <li class="txt-li fl">卸妆洁面</li>
                </ul>
            </div>
            <!-- 中间 -->
            <ul class="con-ctr fl">
                <li class="ctr-li fl">
                    <a href="#">
                        <img src="../imgs/img/selling-center1.png" alt="">
                    </a>
                </li>
                <li class="ctr-li fl">
                    <a href="#">
                        <img src="../imgs/img/selling-center2.png" alt="">
                    </a>
                </li>
                <li class="ctr-li fl">
                    <a href="#">
                        <img src="../imgs/img/selling-center3.png" alt="">
                    </a>
                </li>
                <li class="ctr-li fl">
                    <a href="#">
                        <img src="../imgs/img/selling-center4.png" alt="">
                    </a>
                </li>

            </ul>
            <!-- 右边 -->
            <div class="con-right fl">
                <p class="right-title">
                    <span class="title-span">女装销量</span>
                    <span class="title-span">爆买热款 实时更新</span>
                </p>
                <ul>
                    <li class="right-con active">
                        <p class="right-con-p">1. 乐町牛仔外套女19秋季新款短外</p>
                        <div class="right-con-box clearfix">
                            <a href="#">
                                <p class="con-box-img fl">
                                    <span class="box-img-txt">1</span>
                                </p>
                                <p class="con-box-p">乐町牛仔外套女19秋季新款短外套女</p>
                                <p class="con-box-p"><span class="con-box-span">&yen;</span> 199.00</p>
                            </a>
                        </div>
                    </li>
                    <li class="right-con">
                        <p class="right-con-p">2. 乐町牛仔外套女19秋季新款短外</p>
                        <div class="right-con-box clearfix">
                            <a href="#">
                                <p class="con-box-img fl">
                                    <span class="box-img-txt">2</span>
                                </p>
                                <p class="con-box-p">乐町牛仔外套女19秋季新款短外套女</p>
                                <p class="con-box-p"><span class="con-box-span">&yen;</span> 199.00</p>
                            </a>
                        </div>
                    </li>
                    <li class="right-con">
                        <p class="right-con-p">3. 乐町牛仔外套女19秋季新款短外</p>
                        <div class="right-con-box clearfix">
                            <a href="#">
                                <p class="con-box-img fl">
                                    <span class="box-img-txt">3</span>
                                </p>
                                <p class="con-box-p">乐町牛仔外套女19秋季新款短外套女</p>
                                <p class="con-box-p"><span class="con-box-span">&yen;</span> 199.00</p>
                            </a>
                        </div>
                    </li>
                    <li class="right-con">
                        <p class="right-con-p">4. 乐町牛仔外套女19秋季新款短外</p>
                        <div class="right-con-box clearfix">
                            <a href="#">
                                <p class="con-box-img fl">
                                    <span class="box-img-txt">4</span>
                                </p>
                                <p class="con-box-p">乐町牛仔外套女19秋季新款短外套女</p>
                                <p class="con-box-p"><span class="con-box-span">&yen;</span> 199.00</p>
                            </a>
                        </div>
                    </li>
                    <li class="right-con">
                        <p class="right-con-p">5. 乐町牛仔外套女19秋季新款短外</p>
                        <div class="right-con-box clearfix">
                            <a href="#">
                                <p class="con-box-img fl">
                                    <span class="box-img-txt">5</span>
                                </p>
                                <p class="con-box-p">乐町牛仔外套女19秋季新款短外套女</p>
                                <p class="con-box-p"><span class="con-box-span">&yen;</span> 199.00</p>
                            </a>
                        </div>
                    </li>
                    <li class="right-con">
                        <p class="right-con-p">6. 乐町牛仔外套女19秋季新款短外</p>
                        <div class="right-con-box clearfix">
                            <a href="#">
                                <p class="con-box-img fl">
                                    <span class="box-img-txt">6</span>
                                </p>
                                <p class="con-box-p">乐町牛仔外套女19秋季新款短外套女</p>
                                <p class="con-box-p"><span class="con-box-span">&yen;</span> 199.00</p>
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 品牌专区 -->
    <div class="product container">
        <!-- 产品标题 -->
        <div class="product-title pr">
            <span class="title-img"><img src="../imgs/img/title_bg_icon2-right.png" alt=""></span>
            <span class="title-ctr">品牌专区</span>
            <span class="title-img"><img src="../imgs/img/title_bg_icon2-left.png" alt=""></span>
        </div>
        <!-- 产品内容 -->
        <!-- 上边 -->
        <ul class="con-top clearfix">
            <li class="con-top-li fl">
                <a  href="#">
                    <img src="../imgs/img/egou.png" alt="">
                </a>
            </li>
            <li class="con-top-li fl">
                <h3 class="con-top-h">XX品牌</h3>
                <p class="con-top-p">
                    HLA JEANS更注重与年青一代的情感沟通，提出“不普通的普通人
                    ”的品牌主张，鼓励年轻群体在生活之中坚持小自我，在平凡之中&emsp;
                    展现小个性，在平淡之中发现小乐趣，活出自己的与众小不同。
                </p>
                <a class="con-top-a" href="#">品牌特卖中&emsp;&gt;&gt;</a>
            </li>
        </ul>
        <!-- 下边 -->
        <ul class="con-btm clearfix">
            <li class="btm-li fl">
                <a href="#">
                    <img src="../imgs/img/brand1.png" alt="">
                </a>
            </li>
            <li class="btm-li fl">
                <a href="#">
                    <img src="../imgs/img/brand2.png" alt="">
                </a>
            </li>
            <li class="btm-li fl">
                <a href="#">
                    <img src="../imgs/img/brand3.png" alt="">
                </a>
            </li>
            <li class="btm-li fl">
                <a href="#">
                    <img src="../imgs/img/brand4.png" alt="">
                </a>
            </li>
        </ul>
        <!-- 网页页尾 -->
        <div id="footer" class="footer">
            <ul class="footer-top container clearfix">
                <li class="footer-top-li fl">
                    <img class="footer-top-img fl" src="../imgs/图标/页尾图标1.jpg" alt="">
                    <h3 class="footer-top-h">正品保障</h3>
                    <p class="footer-top-p">正品行货 放心选购</p>
                </li>
                <li class="footer-top-li fl">
                    <img class="footer-top-img fl" src="../imgs/图标/页尾图标3.jpg" alt="">
                    <h3 class="footer-top-h">满86包邮</h3>
                    <p class="footer-top-p">满86元 免运费</p>
                </li>
                <li class="footer-top-li fl">
                    <img class="footer-top-img fl" src="../imgs/图标/页尾图标2.jpg" alt="">
                    <h3 class="footer-top-h">售后无忧</h3>
                    <p class="footer-top-p">7天无理由退货</p>
                </li>
                <li class="footer-top-li fl">
                    <img class="footer-top-img fl" src="../imgs/图标/页尾图标4.jpg" alt="">
                    <h3 class="footer-top-h">准时送达</h3>
                    <p class="footer-top-p">收货时间由你做主</p>
                </li>

            </ul>
            <ul class="footer-nav container clearfix">
                <li class="footer-nav-li fl">
                    <h3 class="footer-nav-h">新手入门</h3>
                    <a class="footer-nav-a" href="#">购物流程</a>
                    <a class="footer-nav-a" href="#">会员制度</a>
                    <a class="footer-nav-a" href="#">订单查询</a>
                    <a class="footer-nav-a" href="#">服务协议及隐私说明</a>
                    <a class="footer-nav-a" href="#">网站地图</a>

                </li>
                <li class="footer-nav-li fl">
                    <h3 class="footer-nav-h">支付方式</h3>
                    <a class="footer-nav-a" href="#">货到付款</a>
                    <a class="footer-nav-a" href="#">网上支付</a>
                    <a class="footer-nav-a" href="#">礼品卡支付</a>
                    <a class="footer-nav-a" href="#">其它支付</a>
                </li>
                <li class="footer-nav-li fl">
                    <h3 class="footer-nav-h">配送服务</h3>
                    <a class="footer-nav-a" href="#">配送进度查询</a>
                    <a class="footer-nav-a" href="#">商品验货与签收</a>
                </li>
                <li class="footer-nav-li fl">
                    <h3 class="footer-nav-h">相关规则</h3>
                    <a class="footer-nav-a" href="#">平台规则</a>
                    <a class="footer-nav-a" href="#">退换货政策</a>
                    <a class="footer-nav-a" href="#">发票制度</a>
                    <a class="footer-nav-a" href="#">帮助中心</a>
                </li>
                <li class="footer-nav-li fl">
                    <h3 class="footer-nav-h">App更优惠</h3>
                    <a class="footer-nav-a" href="#"><img src="../imgs/图标/qryhd.png" alt=""></a>
                </li>
                <li class="footer-nav-li fl">
                    <h3 class="footer-nav-h">加微信查订单</h3>
                    <a class="footer-nav-a" href="#"><img src="../imgs/图标/qryhd.png" alt=""></a>
                </li>
            </ul>
            <div class="footer-bottom">
                <p class="footer-bottom-phone">沪ICP备XXXXXXXXX号 | 经营证照 | 互联网药品信息服务资格证(沪)-经营性-2017-0006 |
                    违法和不良信息举报电话：XXX-XXXXXXXX | 沪B2-XXXXXXX | </p>
                <p class="footer-bottom-permit">沪公网安备 XXXXXXXXX号 | 友情链接 | 出版物经营许可证 | 增值电信业务经营许可证</p>
                <p class="footer-bottom-link">
                    <a href="#"><img src="../imgs/图标/footer1.jpg" alt=""></a>
                    <a href="#"><img src="../imgs/图标/footer2.jpg" alt=""></a>
                    <a href="#"><img src="../imgs/图标/footer3.png" alt=""></a>
                    <a href="#"><img src="../imgs/图标/footer4.jpg" alt=""></a>
                    <a href="#"><img src="../imgs/图标/footer5.png" alt=""></a>
                    <a href="#"><img src="../imgs/图标/footer6.jpg" alt=""></a>

                </p>
            </div>
        </div>

        <!-- 引入插件 -->
        <!-- jq库插件 -->
        <script src="../lib/jquery.js"></script>
        <!-- 轮播插件 -->
        <script src="../js/lunbo/lib/jquery.min.js"></script>
        <script src="../js/lunbo/lib/jquery.slidebox.js"></script>

        <!-- 引入当前js -->
        <script src="../js/productlist.js"></script>
</div>
</body>

</html>